<link rel="stylesheet" href="/Public/assets/layui/css/layui.css">
<style>
    .layui-fixbar {
        display: none;
    }
    
    .hhq-main {
        height: 100%;
    }
    
    .left {
        float: left;
        width: 120px;
        height: 100%;
        font-size: 12px;
    }
    
    .right {
        float: right;
        width: calc(100% - 140px);
    }
    
    .layui-tree {
        line-height: 28px;
    }
    
    #catTree .active {
        background: #E8E8E8;
    }
    
    .layui-table-page {
        height: 41px;
    }
    
    .img-fengmian {
        cursor: pointer;
        width: 48px;
        height: 48px;
    }
    
    .layui-table-body .layui-table-cell {
        height: 48px;
        line-height: 48px;
    }
    
    .avatar {
        width: 30px;
        height: 30px;
    }
    
    .realname {
        display: inline-block;
        margin-left: 4px;
    }
</style>
<div class="widget-head" style="margin-top:0;">
    <div class="widget-title">预约管理</div>
</div>
<div class="hhq-main">
    <div class="layui-clear">
        <div class="layui-btn-group fl" style="margin-right:10px;">
            <php>$game_status = ['all' => '全部','1' => '显示','-1' => '隐藏']; $cur_status = $_GET['status'] == '' ? 'all' : $_GET['status'];</php>
            <foreach name="game_status" item="vo">
                <a href="{:U('yuyue',['status'=>$key])}" class="layui-btn <if condition='$cur_status != $key'>layui-btn-primary</if>">{$vo}</a>
            </foreach>
        </div>
        <a class="layui-btn layui-btn-normal fl" href="javascript:;" style="margin-left:0" onclick="think_open('/game/admin/yuyue_edit','添加',['90%','90%'],0)"> 添加</a>
        <form method="GET" action="{:U('index',['status'=>$cur_status])}" class="fr layui-form" style="width:330px;">
            <div class="layui-input-inline fl" style="width:100px;">
                <php>$types = ['title'=>'标题'];</php>
                <select name="searchtype">
                    <foreach name="types" item="vo" key="k">
                        <option value="{$k}" <if condition="$_GET['searchtype'] eq $k">selected</if>>{$vo}</option>
                    </foreach>
                </select>
            </div>
            <div class="layui-input-inline fr" style="width:230px;">
                <button class="layui-btn fr" lay-submit>搜索</button>
                <input type="text" class="layui-input fr" style="width:160px;" name="keywords" placeholder="请输入关键词" value="{$_GET['keywords']}">
            </div>
            <php> $condition = $_SESSION['onlyMy'] == 1 ? '/uid/'.$_SESSION['loginUser']['id'] : '';</php>
            <php> $condition .= $_GET['searchtype'] && $_GET['keywords'] ? "/searchtype/A.".$_GET['searchtype']."/keywords/".$_GET['keywords'] : '';</php>
            <script>
                var condition = '{$condition}';
            </script>
        </form>
    </div>
    <table id="list" lay-skin="line"></table>
    <script type="text/html" id="barDemo">
        <div class="action-btn">
            <a class="mini_del" href="javascript:;" data-url="/game/api_admin/del_yuyue/ids/{{d.id}}">删除</a>
            <a class="" href="javascript:;" onclick="think_open('/game/admin/yuyue_edit?id={{d.id}}','修改',['90%','90%'],0)">修改</a>
            <a class="" href="javascript:;" onclick="think_open('/game/admin/yuyue_user?pid={{d.id}}','预约用户',['90%','90%'],0)">预约</a>
        </div>
    </script>
</div>

<script>
    loadData(condition, '{$_GET["searchtype"]}', '{$_GET["keywords"]}', []); //第一次加载，默认不改变
    function loadData(condition = '', searchtype = '', keywords = '', cids = []) {
        layui.use(['think'], function() {
            var think = layui.think;
            think.render({
                elem: '#list',
                skin: 'line',
                // height: 500,
                url: '/game/api_admin/getdata_yuyue/status/{$cur_status}' + condition,
                page: true,
                // toolbar: true,
                cols: [
                    [ //表头
                        {
                            type: 'checkbox',
                        }, {
                            field: 'id',
                            title: 'ID',
                            width: 80
                        }, {
                            field: 'title',
                            title: '预约标题'
                        }, {
                            title: '封面',
                            width: 80,
                            templet: function(d) {
                                if (d.image == null || d.image == '') {
                                    return '缺封面';
                                }
                                return '<img src="' + d.image + '" onclick="openImg(\'' + d.image + '\');" class="img-fengmian">';
                            }
                        }, {
                            title: '创建者',
                            width: 110,
                            templet: function(d) {
                                var html = d.avatar == '' || d.avatar == null ? '<img src="/Public/common/img/boy1.png" class="avatar">' : '<img src="' + d.avatar + '" class="avatar">';
                                html += '<div class="realname">' + d.realname + '</div>';
                                return html;
                            }
                        }, {
                            field: 'status',
                            title: '状态',
                            width: 80,
                            templet: function(d) {
                                var tmp = '<span style="color:#999">草稿</span>';
                                switch (parseInt(d.status)) {
                                    case 0:
                                        break;
                                    case 1:
                                        tmp = '<span class="xy-status">显示</span>';
                                        break;
                                    case -1:
                                        tmp = '<span class="xy-status red">隐藏</span>';
                                        break;
                                    default:
                                        tmp = '<span style="color:#CCC">未定义</span>';
                                }
                                return tmp;
                            }
                        }, {
                            field: 'listorder',
                            title: '排序',
                            width: 80
                        }, {
                            field: 'create_time',
                            title: '创建时间',
                            width: 170,
                            templet: function(d) {
                                return think_time(d.create_time, 'Y-m-d H:i:s'); //think_time()是think.js里面的方法
                            }
                        }, {
                            title: '操作',
                            width: 190,
                            align: 'center',
                            toolbar: '#barDemo'
                        }
                    ]
                ]
            }, '{$_GET["searchtype"]}', '{$_GET["keywords"]}');
        });
    }

    function openImg(imgUrl) {
        layui.use(['layer'], function() {
            layer.open({
                type: 1,
                title: '大图预览',
                area: ['90%', '90%'],
                content: '<div style="padding:10px;text-align:center"><img src="' + imgUrl + '" style="max-width:100%;max-height:100%"></div>' //这里content是一个普通的String
            });
        });
    }
</script>